Let's start getting a little more fancy!
Learning Flex
Today, I learned about the flexbox layout. The content of this web page is fit into two rows with the display property set to flex.
Each box of text has two classes. A generic column class, and a specific column class regarding its size.
Layout and Spacing
The column size classes are used to get the layout to work like this. Small columns take up a quarter of the row width, medium columns a half, and large columns 3 quarters.
The width for the size classes are actually slightly smaller than 25%, 50% and 75%. This is to allow the columns some room between them. I set the justify-content property of the rows to space-between in order to create this space.
This column is medium sized, taking up twice the width of the individual small columns to the right and left.
This column and the one below it are also small columns.
These two columns have a third class that style them to be different, changing the background and font colour.
The columns on the row below are populated with filler text.
You can click here to see some of my other projects.
Some Filler Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minum veniam.